import React, {Component} from 'react';
import './index.css'
class Item extends Component {
    state = {mouse:false}
    //鼠标移入移出的回调
    handleMouse = (flag)=>{
        return ()=>{
            this.setState({mouse:flag})
        }
    }
    //勾选、取消勾选某一个todo的回调
    handleCheck = (id)=>{
        return (event)=>{
            this.props.updateTodo(id,event.target.checked)
        }
    }
    //删除一个todo的回调
    handleDelete = (id)=> {
        return ()=>{
            if(window.confirm('确认删除吗'))
            this.props.deleteTode(id)
        }
    }
    render() {
        const {id,name,done} = this.props
        return (
            <li style={{backgroundColor:this.state.mouse ? '#ddd' : 'white'}} onMouseLeave={this.handleMouse(false)} onMouseEnter={this.handleMouse(true)}>
                <label>
                    <input type="checkbox" checked={done} onChange={this.handleCheck(id)}/>
                    <span>{name}</span>
                </label>
                <button onClick={this.handleDelete(id)} className="btn btn-danger" style={{display:this.state.mouse?'block':'none'}}>删除</button>
            </li>
        );
    }
}

export default Item;